<template>
    <div class="chat-window">
        <div class="window-header">
            <el-tooltip
                class="module"
                effect="dark"
                placement="top-start"
                :content="promptIntro || promptName"
            >
                <div class="module">
                    <el-image
                        :src="promptIcon"
                        :lazy="true"
                        class="w-[16px] h-[16px]"
                    />
                    <span class="ml-1.5">{{ promptName }}</span>
                </div>
            </el-tooltip>

            <el-tabs v-model="activeName">
                <el-tab-pane label="总结" name="abstract" />
                <el-tab-pane label="对话" name="dialogue" />
                <el-tab-pane label="全文翻译" name="translate" />
                <!-- <el-tab-pane label="思维导图" name="mind" /> -->
            </el-tabs>
            <div>
                <div class="flex items-center text-tx-secondary">
                    <template v-if="fileStatus === 0">
                        <icon name="el-icon-Refresh" class="is-loading" />
                        <span class="ml-2">排队中</span>
                    </template>
                    <template v-if="fileStatus === 1">
                        <icon name="el-icon-Refresh" class="is-loading" />
                        <span class="ml-2">分析中</span>
                    </template>
                </div>
            </div>
        </div>
        <div class="flex flex-col h-full overflow-hidden">
            <Abstract
                v-show="activeName === 'abstract'"
                :fileCode="fileCode"
                :abstract="abstract"
            />

            <Translate
                v-show="activeName === 'translate'"
                :fileCode="fileCode"
                :translate="translate"
            />

            <Dialogue
                v-show="activeName === 'dialogue'"
                :file-code="fileCode"
                :file-status="fileStatus"
                :file-error="fileError"
                :chat-avatar="chatAvatar"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import Abstract from './_win/abstract.vue'
import Dialogue from './_win/dialogue.vue'
import Translate from './_win/translate.vue'

defineProps({
    // 文件编号
    fileCode: {
        type: String,
        default: ''
    },
    // 文件状态
    fileStatus: {
        type: Number,
        default: 0
    },
    // 失败原因
    fileError: {
        type: String,
        default: ''
    },
    // 对话头像
    chatAvatar: {
        type: String,
        default: ''
    },
    // 自动总结
    autoAbstract: {
        type: Number,
        default: 0
    },
    // 摘要内容
    abstract: {
        type: String,
        default: '',
    },
    // 翻译内容
    translate: {
        type: String,
        default: '',
    },
    // 模式图标
    promptIcon: {
        type: String,
        default: '',
    },
    // 模式名称
    promptName: {
        type: String,
        default: '',
    },
    // 模式简介
    promptIntro: {
        type: String,
        default: ''
    }
})

const activeName = ref<string>('abstract')
</script>

<style scoped lang="scss">
.chat-window {
    display: flex;
    flex-direction: column;
    width: 50%;
    background-color: var(--el-bg-color);
    border: 1px solid var(--el-border-color-lighter);
    border-left: 0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    :deep(.el-tabs__header) {
        padding: 0;
        margin: 0;
    }
    :deep(.el-tabs__nav-wrap::after) {
        height: 0 !important;
    }
    .window-header {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        padding: 8px 16px;
        border-bottom: 1px solid var(--el-border-color-lighter);
        border-top-right-radius: 8px;
        .module {
            display: flex;
            align-items: center;
            height: 30px;
            padding: 0 8px;
            font-size: 13px;
            color: var(--el-text-color-regular);
            background-color: var(--el-bg-color-page);
            border: 1px solid var(--el-border-color-light);
            border-radius: 6px;
        }
    }
}
</style>
